<template>
    <div>
      <h4 class="scrolltitle">精品课 <span @click="moer">查看全部</span></h4>
      <div class="xscroll" ref="wrapper"  >
        <ul>
          <li v-for=" n in xscrollList" @click="details(n.themeid)">
            <img :src='URL + n.img' alt="">
            <div>
              <h5>{{n.title}}</h5>
              <p><span>{{n.book_count}}节课{{n.virtual_click_count}}</span><span><i>{{n.original_price}}</i><b>￥{{n.price}}</b></span></p>
            </div>
          </li>
        </ul>
      </div>


    </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "xscrollList",
      props:['xscrollList'],
      data(){
          return{
            scroll:'' ,
          }
      },
      mounted() {
        setTimeout(()=> {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.wrapper, {scrollX: true, click: true,})
          } else {
            this.scroll.refresh()
          }
        },80)
      },
      methods:{
        moer(){
          this.$router.push({name:'Boutique'})
        },
      details(id){
        this.$router.push({name:'boutiqueDetails',params:{'id':id}})
      }
      }
    }
</script>

<style scoped>
  .scrolltitle{
    margin-bottom: .15rem;
    margin-top: .15rem;
    font-weight: bold;
  }
  .scrolltitle span{
    float: right;
    font-size: .12rem;
    font-weight: normal;
    margin-right: .15rem;
  }
.xscroll {
  width: 100%;
  overflow: hidden;
  height:2rem;
}
.xscroll li{
  float: left;
  width: 2.3rem;
  height: 1.8rem;
  padding: 0 .1rem;
}
.xscroll ul{
  width: 18.4rem;
}
.xscroll img{
  height: 70%;
  width: 100%;
}
</style>
